<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <el-card
        shadow="hover"
        class="scrollbar-demo-item"
        v-for="(item, index) in list"
        :key="item.title"
        :style="{ marginLeft: index === 0 ? '0px' : '16px' }"
      >
        <div>
          <el-icon style="font-size: 30px">
            <component :is="item.icon" />
          </el-icon>
          <div class="title">{{ item.title }}</div>
        </div>
      </el-card>
      <!-- 添加 -->
      <el-card shadow="hover" class="scrollbar-demo-item" style="margin-left: 10px">
        <div>
          <el-icon style="font-size: 30px">
            <plus />
          </el-icon>
        </div>
      </el-card>
    </div>
  </el-scrollbar>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      list: [
        { icon: 'niu-icon-UserCaiSe', title: '用户' },
        { icon: 'niu-icon-TestCaiSe', title: '分析' },
        { icon: 'niu-icon-ShopCaiSe', title: '商品' },
        { icon: 'niu-icon-OrderCaiSe', title: '订单' },
        { icon: 'niu-icon-CardCaiSe', title: '票据' },
        { icon: 'niu-icon-MessageCaiSe', title: '消息' },
        { icon: 'niu-icon-TagCaiSe', title: '标签' },
        { icon: 'niu-icon-RankingCaiSe', title: '排名' }
      ]
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
.scrollbar-flex-content {
  display: flex;

  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 100px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;

    .title {
      font-size: 16px;
      line-height: 32px;
    }
  }
}
</style>
